<template>
	<u-popup :show="show" :round="10" mode="bottom"  @close="close" @open="open" :closeable="true">
		<view class="">
			<view class="title">选择服务时间 </view> 
			
			<view class="workTime">
				<view :class="timeType=='am'?'t1 tbottom':'t1'" @click="choseType('am')">{{startTime}}</view>
				<view class="t2">{{workTime}}小时</view>
				<view :class="timeType=='pm'?'t1 tbottom':'t1'"  @click="choseType('pm')">{{endTime}}</view>
			</view>
			<view class="workTime">
				<view :class="showType=='am'?'t1 typecolor' :'t1'" @click="showType='am';"
				style="border: none;" >{{ amlist[0].label }}-{{amlist[amlist.length - 1].label}}</view>
				<view class="t2"> </view>
				<view :class="showType=='pm'?'t1 typecolor' :'t1'" @click="showType='pm'"
				style="border: none;" >{{ pmlist[0].label }}-{{ pmlist[pmlist.length - 1].label }}</view>
			</view>
			<view class="timebox">
				 
				<view class="time">
					<view v-for="(item,index) in intervalList" :key="index" :class="(startTime==item.value || endTime==item.value) ? 'activetime' : ''" 
					@click="changetime(item,timeType)">
					  <text>{{item.label}}</text>
					  <!-- <text>{{  '' }}可选</text> -->
					</view>
				</view>
				 
			</view> 
			
			<view class="woodsbtn btn" @click="handleTime">
				确定
			</view>
			
			
		</view>
		
	</u-popup>
</template>

<script>
	import calculateTimeDifference from "@/utils/calculateTimeDifference.js"
	import {isEndTimeValid} from "@/utils/utils.js"
	import { getDictDataAPI } from '@/api/api.js'
	export default {
		name:"choseTime",
		data() {
			return {
				show:false,
				startTime:"",
				endTime:"",
				amlist:[],
				pmlist:[],
				workTime:"0",
				timeType:"am",
				showType:"am",
				 
			};
		},
		computed: {
			intervalList () {
				return this.showType === 'am' ? this.amlist : this.pmlist
			},
		},
		methods:{
			handleTime(){
				if(this.workTime==0){
					uni.showToast({
						title:'请选择服务时间',
						icon:'none'
					})
					return
				}
				this.$emit('handleTime',{
					startTime:this.startTime,
					endTime:this.endTime,
					workTime:this.workTime
				})
				this.show = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			choseType(type){
				this.timeType=type
			},
			changetime(item,type){
				if (type=='am') {
					this.startTime=item.value
					this.endTime=''
					this.workTime="0"
					this.timeType='pm'
				}else if (type=='pm') {
					if(!this.startTime){
						return uni.showToast({
							title:"请先选择开始时间",
							icon:"none"
						})
					}
					if(isEndTimeValid(this.startTime,item.value)){
						this.endTime=item.value
					}else{
						return uni.showToast({
							title:"服务时间至少2小时",
							icon:"none"
						})
					}
					
				} 
				if(this.startTime && this.endTime){
					this.workTime=calculateTimeDifference(this.startTime,this.endTime)
				} 
				 
			},
		},
		created() {
			getDictDataAPI('merchant_date_am').then((res) => {
				console.log(res)
				this.amlist = res
			})
			getDictDataAPI('merchant_date_pm').then((res) => {
				console.log(res)
				this.pmlist = res
			})
		}
		
	}
</script>

<style scoped lang="scss">
.title{
	text-align: center;
	line-height: 50rpx;
	font-weight: bold;
	padding: 30rpx;
	
}
.workTime{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	.t1{
		border-bottom: 1px solid #EEEEEE;
		width: 220rpx;
		margin: 0 30rpx;
		height:60rpx;
		text-align: center;
	}
	.t2{
		height: 60rpx;
		width: 160rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
	.typecolor{
		font-weight: bold;
		font-size: 32rpx;
		color: #277EEF;
	}
	.tbottom{
		border-bottom: 1px solid #277EEF;
	}
}
.timebox{
	padding: 10rpx 20rpx;
	height: 600rpx;
	overflow-y: auto;
	.timetitile{
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 30rpx;
	}
	.time{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 20rpx;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			border: 2rpx solid #F2F2F2; 
			background-color: #F2F2F2;
			border-radius: 8rpx;
			color: #333;
			text {
				font-size: 28rpx;
				
			}
		}
		.activetime{
			background: #F2F7FE;
			border-radius: 8rpx;
			border: 2rpx solid #277EEF;
			text{
				color: #277EEF;
			}
		}
	}
}
.chosetime{
	position: fixed;
	left: 5%;
	bottom: 80rpx;
	width: 90%;
	background: linear-gradient(#FF7134,#FF3A3E);
	border-radius:20rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tleft{
		color: #fff;
		text{
			font-size: 36rpx;
			color: #fff;
		}
	}
	.tright{
		width: 200rpx;
		height:80rpx;
		background: #ffc368;
		border-radius: 12rpx;
		text-align: center;
		line-height: 80rpx;
		color: #594423;
	}
}
.btn{
	width: 90%;
	margin-bottom: 40rpx;
}

</style>